<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="listQuery.typeName" />
      </el-form-item>

      <el-form-item label="禁/启用">
        <el-select v-model="listQuery.isEnable" placeholder="请选择" clearable>
          <el-option
            v-for="item in enableList"
            :label="item.isEnable"
            :value="item.number"
            :key="item.number"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="getList()">搜索</el-button>
      <el-button type="primary" @click="openadd()">新增</el-button>
      <!-- <el-button type="primary">排序</el-button> -->
    </el-form>

    <mytable  ref="table" @getList="getList" :listQuery="listQuery">
      <el-table-column prop="orderNumber" align="center" width="70px" label="序号"></el-table-column>
      <el-table-column prop="typeName" align="center" label="名称"></el-table-column>
      <el-table-column prop="number" align="center" label="编号"></el-table-column>
      <el-table-column prop="imgPath" align="center" label="手机端图片路径"></el-table-column>
      <!-- <el-table-column  label="手机端图片路径">
        <template slot-scope="{row}">
          <el-image  style="width: 70px; height: 70px" :src="row.imgPath"  :preview-src-list="[row.imgPath]"> </el-image>
        </template>
      </el-table-column>-->
      <el-table-column prop="icon" align="center" label="PC端ICON"></el-table-column>
      <el-table-column prop="parentId" align="center" label="父级"></el-table-column>
      <el-table-column prop="updateTime" align="center" label="更新时间"></el-table-column>
      <!-- <el-table-column prop="isDelete" align="center" label="状态"></el-table-column> -->
      <el-table-column align="center" label="禁用/启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isEnable"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="禁用"
            @change="openswitch(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="address" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="openEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </mytable>

    <typeEdit ref="typeEdit" />
  </div>
</template>

<script>
import apigoodsType from "@/api/frontManage/goodsType";
import { confirm } from "@/utils/index";
import typeEdit from "./dialogTypeEdit";
import mytable from "@/components/Table";
export default {
  name: "goodsType",
  components: { typeEdit,mytable },
  data() {
    return {
      list: [],
      listQuery: {
        typeName: "",
        isEnable: 1,
        isDelete: 0
      },
      enableList: apigoodsType.enableList,
      deleteList: apigoodsType.deleteList
    };
  },
  methods: {
    getList() {
      apigoodsType.getListGoodsType(this.listQuery).then(res => {
        this.$refs.table.load(res.data.list, 0);
        //this.list = res.data.list;
      });
    },
    //删除
    del(row) {
      confirm("是否删除").then(() => {
        apigoodsType.updateIsDelete({ ids: row.id }).then(res => {
          this.$message({ type: "success", message: "删除成功！" });
          this.getList();
        });
      });
    },
    //开关
    openswitch(row) {
      let data = { id: row.id,  isEnable: row.isEnable  };
      let text = row.isEnable ? "启用" : "禁用";
      this.$confirm(`是否${text}?`, "确认提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"}).then(() => {
          apigoodsType.updateIsEnable(data).then(res => {
            this.getList()
            this.$message({ type: "success", message: `${text}成功!` });
          });
        }) .catch(() => {
          row.isEnable = Number(!row.isEnable )
          this.$message({ type: "info", message: "已取消" });
        });
    },
    //修改
    openEdit(row) {
      this.$refs.typeEdit.openEdit(row);
    },
    //新增
    openadd() {
      this.$refs.typeEdit.openadd();
    }
  }
};
</script>

<style scoped>
</style>